<template>
  <div class="index">
    <!-- <p>首页</p> -->
    <div class="i_item">
      <div class="title">
        封面选择
      </div>
      <div class="center">
        <div class="videoScreenshot">
          <div class="VSItem">
            <img src="@/assets/img/onload.png" class="VSImg" alt="">
            <a-radio>视频截图一</a-radio>
          </div>
          <div class="VSItem">
            <img src="@/assets/img/onload.png" class="VSImg" alt="">
            <a-radio>视频截图二</a-radio>
          </div>
          <div class="VSItem">
            <img src="@/assets/img/onload.png" class="VSImg" alt="">
            <a-radio>视频截图三</a-radio>
          </div>
          <div class="VSItem">
            <img src="@/assets/img/onload.png" class="VSImg" alt="">
            <a-radio>自定义</a-radio>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'index',
  components: {
  }
}
</script>
<style lang="scss" scoped>
.index{
  margin: 20px;
  background-color: $bgW;
  border-radius: 10px;
  .i_item{
    .title{
      padding: 15px;
      font-weight: 600;
      border-bottom: 2px solid $bgC;
    }
  }
  .center{
    padding: 20px;
    .videoScreenshot{
        @include flexbox(){
          justify-content: space-around;
          align-items: center;
        }
        .VSItem{
          width: 22%;
          text-align: center;
          .VSImg{
            width: 100%;
          }
          .ant-radio-wrapper{
            margin: 10px;
            font-size: 12px;
          }
        }
    }
  }
}
</style>